import React,{Component} from 'react';
import {connect} from 'react-redux'
import {ListActions} from '../_helpers/List.actions'
import {FilterConstants} from '../_helpers/constants'
const cityKV={"0002":"广州"};
const regionKV={"0001":"天河","0002":"增城","":"全部"};



class Overlay extends Component{
state={openLocation:false,city:this.props.region[0]}

  handleChangeCity=e=>{
this.setState({city:e.target.getAttribute("city")});
  }
	handleChangeRegion=e=>{
 const region=[this.state.city,e.target.getAttribute("region")];

 this.props.dispatch({ type: FilterConstants.SET_REGION, region });
    this.props.dispatch(ListActions.getList('/product/?page=1&region='+this.state.city+e.target.getAttribute("region")));
    this.setState({openLocation:false})
  }
  handleLocation=e=>{
this.setState({openLocation:!this.state.openLocation})
  }
  render(){
    return (
      <div className="filter">
      <ul className="filter_ul">
        <li className="filter_li" onClick={this.handleLocation}>{cityKV[this.props.region[0]]}-{regionKV[this.props.region[1]]}</li>

      </ul>
    {this.state.openLocation&& <div  className="mengban" >
    <div className="weizhi">
      <ul className="weizhi_ul">
        <li className="flex1">

                        <p city="0002" className={this.props.region[0]==="0002"?"weizhi_p weizhi_on":"weizhi_p"} onClick={this.handleChangeCity}>广州</p>

        </li>
                    <li className="flex13">
                        <p region="" className={this.props.region[1]===""?"weizhi_on":null} onClick={this.handleChangeRegion}>全部</p>
                        <p region="0001" className={this.props.region[1]==="0001"?"weizhi_on":null} onClick={this.handleChangeRegion}>天河</p>
                        <p region="0002" className={this.props.region[1]==="0002"?"weizhi_on":null} onClick={this.handleChangeRegion}>增城</p>
                    </li>
                </ul>
    </div>
  </div>
}
  </div>)
  }
}

  const connectedOverlay = connect((state) => {
    const {region} = state.Filter
    return {region};
})(Overlay);
export {connectedOverlay as Overlay};
